<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React.createClass-创建一个react组件（es5的方式）</title>
	<script src="./libs/15.4.2/react.min.js"></script>
	<script src="./libs/15.4.2/react-dom.min.js"></script>
	<script src="./libs/15.4.2/babel.min.js"></script>
</head>

<body>
	<div id="container"></div>
</body>

<script type="text/babel">
  //console.log(React);
  //高版本中已废弃React.createClass()函数（所以不推荐）
  //注意:组件名首字母必须大写
  var HelloComponent=React.createClass({

    //属性校验:自动校验属性(this.props)数据类型
    propTypes: {
      name: React.PropTypes.string,
      company:React.PropTypes.string 
    }, 
    
    //设置组件内默认属性值(如果调用组件的时候没有通过自定义属性传递参数，则默认调用此处设置的值)
    getDefaultProps: function() {
      return {
        name: '默认name', 
        company:'默认company'
      };
    },
    
    //初始化state
    getInitialState: function() {
      return {count: this.props.initialCount}; 
    },

    render: function() {
      // console.log(this.props);
      return <div>
      <h1>Hello {this.props.name}</h1>
      <p>powered by {this.props.company}</p>
      </div>
      ;
    }
  });

  /*
    调用组件的时候通过自定义属性的方式传递参数，
    传递的参数默认在组件内部通过`this.props.属性名`调用
  */
   ReactDOM.render(
      <HelloComponent name="react" company="facebook"/>,
      document.getElementById('container')
    );
</script> 
</html>
